<template>
	<!-- table -->
	<view class="">
		<view class="flex-left" v-if="selectionBox">
			<!-- #ifdef APP-PLUS -->
			<view class="w-49%" style="z-index: 100;position: relative;">
				<view class="yinying" style="position: absolute;top: 0rpx;right: -32.5rpx;" v-if="dataList.length > 0">
				</view>
				<u-table align="left">
					<u-tr class="u-tr h-80rpx">
						<u-th class="u-th" width="20.5%">
							<u-checkbox-group>
								<view class="w-100%" style="text-align: center;">
									<u-checkbox label='全选' v-model="isAllChecked" @change="allChoose"></u-checkbox>
								</view>
							</u-checkbox-group>
						</u-th>
						<u-th class="u-th" width="80%" :class="{'kuandu':dataList.length === 0}">派工单号</u-th>
					</u-tr>
					<u-checkbox-group>
						<u-tr class="u-tr h-96rpx" v-for="(item, index) in dataList" :key="item.id"
							:class="orderId === item.id ? 'interaction':''" @touchstart="pressColor(item.id)"
							@touchend="loosenColor()">
							<u-td class="u-td" width="20.5%">
								<view class="w-100%" style="text-align: center;">
									<u-checkbox @change="checkboxChange" v-model="item.checked" :key="index"
										:name="item.id"></u-checkbox>
								</view>
							</u-td>
							<u-td class="u-td" width="80%" :class="item.result === 2?'redColor':'oddNumbers'"
								@click="insulationInspection(item.prodWork, item.processDesc,item.id)">{{ item.prodWork }}</u-td>
						</u-tr>
					</u-checkbox-group>
				</u-table>
			</view>
			<view class="w-51%" style="overflow-x: auto;">
				<view class="w-200%">
					<u-table align="left">
						<u-tr class="u-tr h-80rpx">
							<u-th width="24%" class="u-th">工序描述</u-th>
							<u-th width="30%" class="u-th">作业设备</u-th>
							<u-th width="23%" class="u-th">操作工</u-th>
							<u-th width="36%" class="u-th">报工时间</u-th>
							<u-th width="24%" class="u-th">卷盘号</u-th>
						</u-tr>
						<u-checkbox-group>
							<u-tr class="u-tr h-96rpx" v-for="(item, index) in dataList" :key="item.id"
								:class="orderId === item.id ? 'interaction':''" @touchstart="pressColor(item.id)"
								@touchend="loosenColor()">
								<u-td width="24%" class="u-td">{{ item.processDesc }}</u-td>
								<u-td width="30%" class="u-td">{{ item.workDevice }}</u-td>
								<u-td width="23%" class="u-td">{{ item.operatorName }}</u-td>
								<u-td width="36%" class="u-td">{{ item.createTime }}</u-td>
								<u-td width="24%" class="u-td">{{ item.reelNumber }}</u-td>
							</u-tr>
						</u-checkbox-group>
					</u-table>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<view class="w-54%" style="z-index: 100;position: relative;">
				<view class="yinying" style="position: absolute;top: 0rpx;right: -25rpx;" v-if="dataList.length > 0">
				</view>
				<u-table align="left">
					<u-tr class="u-tr h-80rpx">
						<u-th class="u-th" width="20.5%">
							<u-checkbox-group>
								<view class="w-100%" style="text-align: center;">
									<u-checkbox label='全选' v-model="isAllChecked" @change="allChoose"></u-checkbox>
								</view>
							</u-checkbox-group>
						</u-th>
						<u-th class="u-th" width="80%" :class="{'kuandu':dataList.length === 0}">派工单号</u-th>
					</u-tr>
					<u-checkbox-group>
						<u-tr class="u-tr h-96rpx" v-for="(item, index) in dataList" :key="item.id"
							:class="orderId === item.id ? 'interaction':''" @touchstart="pressColor(item.id)"
							@touchend="loosenColor()">
							<u-td class="u-td" width="20.5%">
								<view class="w-100%" style="text-align: center;">
									<u-checkbox @change="checkboxChange" v-model="item.checked" :key="index"
										:name="item.id"></u-checkbox>
								</view>
							</u-td>
							<u-td class="u-td " width="80%" :class="item.result === 2?'redColor':'oddNumbers'"
								@click="insulationInspection(item.prodWork, item.processDesc,item.id)">{{ item.prodWork }}</u-td>
						</u-tr>
					</u-checkbox-group>
				</u-table>
			</view>
			<view class="w-46%" style="overflow-x: auto;">
				<view class="w-200%">
					<u-table align="left">
						<u-tr class="u-tr h-80rpx">
							<u-th width="24%" class="u-th">工序描述</u-th>
							<u-th width="30%" class="u-th">作业设备</u-th>
							<u-th width="23%" class="u-th">操作工</u-th>
							<u-th width="36%" class="u-th">报工时间</u-th>
							<u-th width="24%" class="u-th">卷盘号</u-th>
						</u-tr>
						<u-checkbox-group>
							<u-tr class="u-tr h-96rpx" v-for="(item, index) in dataList" :key="item.id"
								:class="orderId === item.id ? 'interaction':''" @touchstart="pressColor(item.id)"
								@touchend="loosenColor()">
								<u-td width="24%" class="u-td">{{ item.processDesc }}</u-td>
								<u-td width="30%" class="u-td">{{ item.workDevice }}</u-td>
								<u-td width="23%" class="u-td">{{ item.operatorName }}</u-td>
								<u-td width="36%" class="u-td">{{ item.createTime }}</u-td>
								<u-td width="24%" class="u-td">{{ item.reelNumber }}</u-td>
							</u-tr>
						</u-checkbox-group>
					</u-table>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="flex-left" v-else>
			<!-- #ifdef APP-PLUS -->
			<view class="w-38%" style="z-index: 100;position: relative;">
				<view class="yinying" style="position: absolute;top: 0rpx;right: -25rpx;" v-if="dataList.length > 0">
				</view>
				<u-table align="left">
					<u-tr class="u-tr h-80rpx">
						<u-th class="u-th" width="100%" :class="{'kuandu':dataList.length === 0}">派工单号</u-th>
					</u-tr>
					<u-checkbox-group>
						<u-tr class="u-tr h-96rpx" v-for="(item, index) in dataList" :key="item.id"
							:class="orderId === item.id ? 'interaction':''" @touchstart="pressColor(item.id)"
							@touchend="loosenColor()">
							<u-td class="u-td" width="100%" :class="item.result === 2?'redColor':'oddNumbers'"
								@click="insulationInspection(item.prodWork, item.processDesc,item.id)">{{ item.prodWork }}</u-td>
						</u-tr>
					</u-checkbox-group>
				</u-table>
			</view>
			<view class="w-62%" style="overflow-x: auto;">
				<view class="w-138%">
					<u-table align="left">
						<u-tr class="u-tr h-80rpx">
							<u-th width="24%" class="u-th">工序描述</u-th>
							<u-th width="30%" class="u-th">作业设备</u-th>
							<u-th width="23%" class="u-th">操作工</u-th>
							<u-th width="44%" class="u-th">报工时间</u-th>
							<u-th width="24%" class="u-th">卷盘号</u-th>
						</u-tr>
						<u-checkbox-group>
							<u-tr class="u-tr h-96rpx" v-for="(item, index) in dataList" :key="item.id"
								:class="orderId === item.id ? 'interaction':''" @touchstart="pressColor(item.id)"
								@touchend="loosenColor()">
								<u-td width="24%" class="u-td">{{ item.processDesc }}</u-td>
								<u-td width="30%" class="u-td">{{ item.workDevice }}</u-td>
								<u-td width="23%" class="u-td">{{ item.operatorName }}</u-td>
								<u-td width="44%" class="u-td">{{ item.createTime }}</u-td>
								<u-td width="24%" class="u-td">{{ item.reelNumber }}</u-td>
							</u-tr>
						</u-checkbox-group>
					</u-table>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<view class="w-42%" style="z-index: 100;position: relative;">
				<view class="yinying" style="position: absolute;top: 0rpx;right: -25rpx;" v-if="dataList.length > 0">
				</view>
				<u-table align="left">
					<u-tr class="u-tr h-80rpx">
						<u-th class="u-th" width="100%" :class="{'kuandu':dataList.length === 0}">派工单号</u-th>
					</u-tr>
					<u-checkbox-group>
						<u-tr class="u-tr h-96rpx" v-for="(item, index) in dataList" :key="item.id"
							:class="orderId === item.id ? 'interaction':''" @touchstart="pressColor(item.id)"
							@touchend="loosenColor()">
							<u-td class="u-td" width="100%" :class="item.result === 2?'redColor':'oddNumbers'"
								@click="insulationInspection(item.prodWork, item.processDesc,item.id)">{{ item.prodWork }}</u-td>
						</u-tr>
					</u-checkbox-group>
				</u-table>
			</view>
			<view class="w-58%" style="overflow-x: auto;">
				<view class="w-148%">
					<u-table align="left">
						<u-tr class="u-tr h-80rpx">
							<u-th width="24%" class="u-th">工序描述</u-th>
							<u-th width="30%" class="u-th">作业设备</u-th>
							<u-th width="23%" class="u-th">操作工</u-th>
							<u-th width="44%" class="u-th">报工时间</u-th>
							<u-th width="24%" class="u-th">卷盘号</u-th>
						</u-tr>
						<u-checkbox-group>
							<u-tr class="u-tr h-96rpx" v-for="(item, index) in dataList" :key="item.id"
								:class="orderId === item.id ? 'interaction':''" @touchstart="pressColor(item.id)"
								@touchend="loosenColor()">
								<u-td width="24%" class="u-td">{{ item.processDesc }}</u-td>
								<u-td width="30%" class="u-td">{{ item.workDevice }}</u-td>
								<u-td width="23%" class="u-td">{{ item.operatorName }}</u-td>
								<u-td width="44%" class="u-td">{{ item.createTime }}</u-td>
								<u-td width="24%" class="u-td">{{ item.reelNumber }}</u-td>
							</u-tr>
						</u-checkbox-group>
					</u-table>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view v-if="dataList.length === 0" class="flex-center">
			—— 暂无数据 ——
		</view>
		<view v-if="pageTurning" class="flex-center mt-20rpx">
			正在加载中...
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, toRefs, ref } from 'vue'
	const emit = defineEmits(["particulars", "multiParticulars"])
	// const props = defineProps({
	// 	dataList: [],
	// 	selectionBox: Boolean
	// })
	const props = defineProps<{
		dataList ?: [];
		pageTurning ?: Boolean;
		selectionBox ?: Boolean
	}>()

	const dataList = toRefs(props).dataList
	const pageTurning = toRefs(props).pageTurning
	const selectionBox = toRefs(props).selectionBox
	function insulationInspection(prodWork : string[], processDesc : string, id : string[]) {
		emit("particulars", prodWork, processDesc, id)
	}

	function checkboxChange(e) {
		dataList.value.map(val => {
			if (val.id === e.name) {
				val.checked = e.value
			}
		})
		checkedDispose()

	}
	const isAllChecked = ref<boolean>(false)
	function allChoose() {
		isAllChecked.value = !isAllChecked.value
		checkedAll(isAllChecked.value)
	}

	// 全选
	function checkedAll(e) {
		dataList.value.map(val => {
			val.checked = e
		})
		checkedDispose()
	}
	const processDescsingle = ref<boolean>(true)
	const processDesc = ref<string>()
	const prodWorkList = ref<[]>([])
	const listId = ref<[]>([])
	function checkedDispose() {
		prodWorkList.value = dataList.value
			.filter(item => item.checked) // 过滤出checked为true的对象
			.map(item => item.prodWork); // 取出符合条件的对象的prodWork属性值
		listId.value = dataList.value
			.filter(item => item.checked) // 过滤出checked为true的对象
			.map(item => item.id); // 取出符合条件的对象的prodWork属性值
		let process = dataList.value
			.filter(item => item.checked) // 过滤出checked为true的对象
			.map(item => item.processDesc); // 取出符合条件的对象的prodWork属性值
		processDescsingle.value = process.every((val, i, arr) => val === arr[0]);
		processDesc.value = process[0]
		emit('multiParticulars', processDescsingle.value, processDesc.value, prodWorkList.value, listId.value)
	}

	const orderId = ref<number>(null)
	function pressColor(e : number) {
		orderId.value = e
	}
	function loosenColor() {
		orderId.value = null
	}
</script>

<style scoped>
	.kuandu {
		/* flex: 0 0  !important; */
	}

	.redColor {
		color: #E52B2B !important;
	}

	.u-th {
		font-size: 26rpx !important;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1E1F22;
		background-color: #F5F5F5;
		padding: 0rpx 24rpx !important;
	}

	.u-td {
		font-size: 22rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
		line-height: 36rpx;
		background-color: #fff;
		padding: 0rpx 24rpx !important;
	}

	.oddNumbers {
		color: #2F7BFF !important;
	}

	.u-checkbox-group {
		width: 100%;
	}

	.u-tr {
		width: 100%;
	}

	.u-checkbox,
	.u-radio {
		width: 34rpx !important;
		height: 34rpx !important;
	}

	.u-radio-group {
		width: 54rpx;
		display: flex;
		justify-content: center;
	}

	.interaction>.u-td {
		background-color: #f5f5f5;
	}

	.yinying {
		width: 25rpx !important;
		height: 100%;
		background: linear-gradient(90deg, rgba(228, 231, 237, 0.5) 0%, rgba(245, 245, 245, 0.0) 50%, rgba(255, 255, 255, 0) 100%);
	}

	::v-deep .u-table {
		border-left: 0rpx solid rgb(228, 231, 237) !important;
	}
</style>